@keyframes con-show {
  from {
    transform: translateY(20px);
    opacity: 0
  }
  to {
    transform: translateY(0px);
    opacity: 1
  }
}
@keyframes con-hide {
  from {
    transform: translateY(0px);
    opacity: 1
  }
  to {
    transform: translateY(20px);
    opacity: 0
  }
}
.validate-slide {
  position: absolute;
  width: 340px;
  height: 270px;
  cursor: pointer;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  background-color: #fff;
  display: none
}
.validate-slide .validate-slide-container {
  padding: 10px
}
.validate-slide .validate-slide-container .validate-slide-box {
  position: relative;
  overflow: hidden
}
.validate-slide .validate-slide-container .validate-slide-box .validate-slide-bg-img {
  width: 320px;
  height: 160px
}
.validate-slide .validate-slide-container .validate-slide-box .validate-slide-slide-img {
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.9));
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 50px
}
.validate-slide .validate-slide-container .validate-slide-box .validate-slide-info {
  position: absolute;
  bottom: -20px;
  height: 20px;
  line-height: 20px;
  color: #fff;
  width: 100%;
  font-size: 13px;
  text-indent: 5px;
  transition: all 0.2s linear
}
.validate-slide .validate-slide-container .validate-slide-box .validate-success {
  background-color: #19be6b
}
.validate-slide .validate-slide-container .validate-slide-box .validate-error {
  background-color: #ed4014
}
.validate-slide .validate-slide-container .validete-slide-action {
  margin-top: 5px;
  margin-bottom: 5px
}
.validate-slide .validate-slide-container .validete-slide-action .validete-slide-refresh-btn, .validate-slide .validate-slide-container .validete-slide-action .validete-slide-close-btn {
  float: left;
  border: none;
  background-color: transparent;
  cursor: pointer
}
.validate-slide .validate-slide-container .validete-slide-action .validete-slide-refresh-btn:focus, .validate-slide .validate-slide-container .validete-slide-action .validete-slide-close-btn:focus {
  outline: none
}
.validate-slide .validate-slide-container .validete-slide-action::after {
  content: '';
  clear: both;
  display: block
}
.validate-slide .validate-slide-btn-con {
  position: relative;
  height: 35px;
  width: 230px;
  margin-left: 15px;
  background-color: #ccc;
  color: #88949d;
  padding-left: 85px;
  font-size: 14px;
  line-height: 35px;
  border-radius: 17.5px
}
.validate-slide .validate-slide-btn-con .validate-slide-btn {
  position: absolute;
  left: -5px;
  top: -10px;
  z-index: 100;
  border: none;
  background-color: #fff;
  overflow: hidden;
  cursor: pointer;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  padding: 0;
  box-shadow: 0 0 6px #ccc
}
.validate-slide .validate-slide-btn-con .validate-slide-btn:focus {
  outline: none
}
.validate-slide .validate-icon {
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block
}
.validate-slide .icon-refresh {
  background-image: url();
  width: 20px;
  height: 20px;
  background-size: cover
}
.validate-slide .icon-close {
  background-image: url();
  width: 20px;
  height: 20px;
  background-size: cover
}
.validate-slide .icon-pause {
  background-image: url();
  width: 35px;
  height: 35px;
  background-size: cover;
  vertical-align: middle;
  background-color: #fff
}
.validate-slide .icon-draging {
  background-image: url() !important
}
.validate-slide-wrap-show {
  animation: con-show 0.3s ease-out forwards
}
.validate-slide-wrap-hide {
  animation: con-hide 0.3s ease-out forwards
}